<!DOCTYPE html>
<html>
  
<head>
    
    <meta charset="utf-8">
    <title>欢迎来到我的个人网站</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
</head>
<body>
    <nav class="nav bg-primary">
    <a class="nav-link text-white text-white" href="#forme">个人简介</a>
    <a class="nav-link text-white text-white" href="#picture">示例图片</a>
    <a class="nav-link" href="#dropdownMenuLink">Link</a>
    <a class="nav-link disabled" href="#">Disabled</a>
    </nav>
</body>
<body>
    <h3 id ="forme"><span></span></h3>
    <div class="card mb-3" style="max-width: 540px;">
        <div class="row no-gutters">
          <div class="col-md-4">
            <!--<img src="https://gitee.com/finderMarion/pic/raw/master/7622fe500d64cac1ba2b7311a25ef904d2311551.jpg" class="card-img" alt="...">-->
            <img src="https://gitee.com/finderMarion/pic/raw/master/github.png" class="card-img" alt="...">
        </div>
          <div class="col-md-8">
            <div class="card-body">
              <h5 class="card-title">个人简介</h5>
              <p class="card-text">略.</p>
            </div>
          </div>
        </div>
      </div>
</body>
<body>
    <h3 id ="picture"><span></span></h3>
      </div>
      <div class="card-deck">
        <div class="card">
          <img class="card-img-top" src="https://www.picbed.cn/images/2021/06/19/beijing.png" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">示例</h5>
            <p class="card-text">来自于Microsoft</p>
            <!--<p class="card-text"><small class="text-muted">请注意：如果你要下载，请将链接中的md.去掉，即为原图</small></p>-->
          </div>
        </div>
        <div class="card">
          <img class="card-img-top" src="https://www.picbed.cn/images/2021/06/21/2d568c6b1c74b889e.png" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">示例2</h5>
            <p class="card-text">来自于Microsoft</p>
            <!--<p class="card-text"><small class="text-muted">请注意：如果你要下载，请将链接中的md.去掉，即为原图</small></p>-->
          </div>
        </div>
        <div class="card">
          <img class="card-img-top" src="..." alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
</body>
</html>